<template>
  <card title="分类管理">
    <button class="button is-primary" slot="right" @click="finish">完成</button>
    <loading v-if="isLoading"></loading>
    <div class="select-box" v-else>
      <div class="select-active">
        <div class="selet-title">选择的广告</div>
        <draggable class="list-group" element="div" v-model="list2" :options="dragOptions"> 
          <transition-group type="transition" name="flip-list" tag="div">
            <div class="box" v-for="(item, index) in list2" :key="item.id">
              {{index + 1}} - {{item.title}}
            </div>
          </transition-group>
        </draggable>
      </div>
      <div class="select-no-active">
        <div class="selet-title">剩下的广告</div>
        <draggable class="list-group" element="div" v-model="list" :options="dragOptions"> 
          <transition-group type="transition" name="flip-list" tag="div">
            <div class="box" v-for="(item, index) in list" :key="item.id">
              {{index + 1}} - {{item.title}}
            </div>
          </transition-group>
        </draggable>
      </div>
    </div>
  </card>
</template>
<script>
import draggable from 'vuedraggable'
export default {
  name: 'app-sort',
  props: {
    id: {
      type: Number,
      default: 1
    },
    ads: {
      type: Array,
      default: () => []
    }
  },
  components: {
    draggable
  },
  computed: {
    dragOptions () {
      return {
        animation: 0,
        group: 'description',
        disabled: !this.editable,
        ghostClass: 'ghost'
      }
    }
  },
  created () {
    let list = [...this.ads]
    let param = {
      page: 1,
      per_page: 10000,
      ad_item_id: this.id
    }
    this.isLoading = true
    this.$api.get('ads', param).then(req => {
      this.list2 = req.list || []
      let ids = Array.from(this.list2, item => {
        return item.id
      })
      this.list = list.filter(item => ids.indexOf(item.id) === -1)
      this.isLoading = false
    })
  },
  data () {
    return {
      isLoading: false,
      editable: true,
      list2: [],
      list: []
    }
  },
  methods: {
    onMove ({relatedContext, draggedContext}) {
      const relatedElement = relatedContext.element
      const draggedElement = draggedContext.element
      return (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
    },
    finish () {
      let ids = Array.from(this.list2, item => {
        return item.id
      })
      let param = {
        ad_item_id: this.id,
        ad_ids: ids
      }
      this.$api.put('ads/sort_ad_item', param).then(() => {
        this.$openMessage({message: '分配成功', type: 'success'})
        this.$emit('close')
      }).catch(() => {
        this.$openMessage({message: '分配失败'})
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.select-box{
  display: flex;
  & > div {
    flex-grow: 1;
    flex-basis: 0;
    flex-shrink: 0;
    .selet-title{
      display: flex;
      justify-content: center;
      padding: 10px 0;
      font-size: 20px;
      font-weight: bold;
    }
    .list-group{
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 10px 40px;
      & > div {
        width: 100%;
        height: 100%;
      }
      .box {
        cursor: move;
        margin-bottom: 10px;
      }
    }
  }
}

.flip-list-move {
  transition: transform 0.5s;
}
.ghost {
  opacity: .2;
  background: #15b6e4;
  color: white;
}
</style>
